<template>
  <div class="homeMain">
    <banner :bg="bannerBg">
      <vuetyped v-if="store.state.frontData.typewriter" :strings="[store.state.frontData.typewriter]" :loop="false"
        :smart-backspace="true">
        <div class="typing" />
      </vuetyped>
    </banner>
    <div class="homeContent">
      <router-view v-slot="{ Component }">
        <transition name="fade2" appear mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, defineAsyncComponent } from 'vue'
// 引入大banner 
const Banner = defineAsyncComponent(() => import('@/components/home/Banner.vue'))
// banner背景
const bannerBg = ref('https://w.wallhaven.cc/full/we/wallhaven-weeqzx.jpg')
const store: any = inject('store')
bannerBg.value = store.state.frontData && store.state.BaseUrl + store.state.frontData.bg
</script>

<style lang="scss" scoped>
// 显示和隐藏
.fade2-enter-active {
  animation: isDemo 0.5s reverse;
}

.fade2-leave-active {
  animation: isDemo 0.5s;
}

@keyframes isDemo {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}
</style>